import { StyleSheet, Modal, TouchableWithoutFeedback } from 'react-native'
import React, { useState } from 'react'
import Swiper from './Swiper'
import { View, Image } from 'native-base'
import { getDomain } from '../utils/tools'
import { addStyles } from '../utils/tools'
import ImageViewer from 'react-native-image-zoom-viewer'

const Banner = (props) => {
  const { list = [], keyName = 'url', style, autoplayTimeout = 5 } = props
  const [isOpen, setIsOpen] = useState(false)
  const [index, setIndex] = useState(0)
  const onIndexChanged = (index) => {

  }
  const openViewer = (i) => {
    console.log('点击', i)
    setIndex(i)
    setIsOpen(true)
  }
  const closeViewer = (i) => {
    console.log('点击', i)
    setIndex(i)
    setIsOpen(false)
  }
  return (
    <View style={addStyles(styles.banner, style)}>
      <Modal visible={isOpen} transparent={true}>
        <ImageViewer imageUrls={list.map(item => ({url: getDomain(item[keyName])}))} 
        onClick={closeViewer} index={index} />
      </Modal>
      <Swiper onIndexChanged={onIndexChanged} loop={true}
        autoplay={true} autoplayTimeout={autoplayTimeout}
      >
        {
          list.map((item, index) => {
            return (
              <TouchableWithoutFeedback key={index} onPress={() => openViewer(index)}>
                <Image style={styles.slide} source={{ uri: getDomain(item[keyName]) }}
                  alt="轮播图" resizeMode='stretch'></Image>
              </TouchableWithoutFeedback>
            )
          })
        }
      </Swiper>
    </View>
  )
}

export default Banner

const styles = StyleSheet.create({
  banner: {
    height: 150,
    // marginVertical: 10
    // backgroundColor: '#fff'
  },
  swiper: {

  },
  slide: {
    flex: 1
  }
})